<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css" rel="stylesheet">
        #app {
            width: 1100px;
            display: flex;
            flex-direction: column;
            height: 600px;
        }

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .msg {
            height: 50px;
            line-height: 12px;
            margin-bottom: 5px;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">

    <div v-show="!user.id">
        <el-card>
            <el-input v-model="user.name" placeholder="请输入内容"></el-input>
            <el-button @click="link">Link Start</el-button>
        </el-card>
    </div>

    <el-container v-show="user.id">
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <el-card v-for="data in datas" class="box-card msg" v-bind:style="{ textAlign: textAlign(data)}">
                    {{ data.user.id === user.id ? '我' : data.user.name }} 说:{{ data.text }}
                </el-card>
            </el-main>
            <el-footer>
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="textarea">
                </el-input>
                <el-button @click="send">Send</el-button>
            </el-footer>
        </el-container>
    </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                user: {
                    id: null,
                    name: ''
                },
                textarea: '',
                datas: [],
                socket: null,
                timer: null
            }
        },
        methods: {
            textAlign: function (msg) {
                return this.user.id === msg.user.id ? 'right' : 'left';
            },
            link: function () {
                var socket = new WebSocket("ws://192.168.10.10:9501");
                var that = this;
                socket.onopen = function (ev) {
                    var login = {
                        type: 'login',
                        user: that.user
                    };
                    that.timer && clearInterval(that.timer);
                    that.allSend(login)
                };
                socket.onerror = function (ev2) {
                    that.reconnect();
                };
                socket.onclose = function (ev2) {
                   that.reconnect();
                };
                socket.onmessage = function (ev2) {
                    var data = JSON.parse(ev2.data);
                    if (data.type === 'msg') {
                        that.datas.push(data)
                    } else {
                        that.user = data.user;
                    }
                };
                this.socket = socket;
            },
            send: function () {
                if (this.textarea) {
                    var msg = {
                        type: 'msg',
                        text: this.textarea,
                        user: this.user
                    };
                    this.allSend(msg)
                }
            },
            allSend: function (body) {
                this.socket.send(JSON.stringify(body))
            },
            reconnect: function () {
                if (!this.timer) {
                    var that = this;
                    this.timer = setInterval(function () {
                        that.link();
                    }, 5000)
                }
            }
        }
    })
</script>
</html>